<template>
	<screen-page title="高位库和AGV信息总览" ref="page">
		<div class="page-newscreen2-container hor-flex-containter">
			<div class="divider"></div>
			<div class="special-blcok special-blcok-size-a">
				<div class="ver-flex-containter">
					<div class="ver-flex-block">
						<easy-block :title="agv1Info.agvName+'状态'">
							<div :class="['status-text-view',agv1Info.agvStatus==='正常'?'normal':'danger']">{{agv1Info.agvStatus}}</div>
						</easy-block>
					</div>
					<div class="ver-divider"></div>
					<div class="ver-flex-block">
						<easy-block title="异常信息">
							<div class="abnormal-info">
								<div class="no-info" v-if="agv1Info.agvStatus==='正常'">
									<div>- -</div>
									<div>- -</div>
								</div>
								<div class="has-info" v-else>
									<div class="time-info">
										<p>报警时间</p>
										<p class="number">{{agv1Info.alarmTime}}</p>
									</div>
									<div class="code-info">
										<p>报警代码</p>
										<p class="number">{{agv1Info.alarmCode}}</p>
									</div>
								</div>
							</div>
						</easy-block>
					</div>
				</div>
			</div>
			<div class="flex-block">
				<store-chart ref="storechart" :data-source="chartData" />
			</div>
			<div class="special-blcok special-blcok-size-a">
				<div class="ver-flex-containter">
					<div class="ver-flex-block">
						<easy-block :title="agv2Info.agvName+'状态'">
							<div :class="['status-text-view',agv2Info.agvStatus==='正常'?'normal':'danger']">{{agv2Info.agvStatus}}</div>
						</easy-block>
					</div>
					<div class="ver-divider"></div>
					<div class="ver-flex-block">
						<easy-block title="异常信息">
							<div class="abnormal-info">
								<div class="no-info" v-if="agv2Info.agvStatus==='正常'">
									<div>- -</div>
									<div>- -</div>
								</div>
								<div class="has-info" v-else>
									<div class="time-info">
										<p>报警时间</p>
										<p class="number">{{agv2Info.alarmTime}}</p>
									</div>
									<div class="code-info">
										<p>报警代码</p>
										<p class="number">{{agv2Info.alarmCode}}</p>
									</div>
								</div>
							</div>
						</easy-block>
					</div>
				</div>
			</div>
			<div class="divider"></div>
		</div>
	</screen-page>
</template>

<script setup>
import { ref, inject, onMounted, onBeforeUnmount, getCurrentInstance, nextTick } from 'vue';
import ScreenPage from '@/components/ScreenPage.vue'
import EasyBlock from '@/views/components/EasyBlock.vue'
import StoreChart from '@/views/components/StoreChart.vue'	
import { $loading } from '@/assets/js/utils'

const instance = getCurrentInstance()
const $config = inject('$config')
const $api = inject('$api')

let interval1 = null;
let interval2 = null;

const agv1Info = ref({
	agvName:'',
	agvStatus:'',
	alarmTime:'',
	alarmCode:''
})
const agv2Info = ref({
	agvName:'',
	agvStatus:'',
	alarmTime:'',
	alarmCode:''
})
const chartData = ref({})

const getData = function(){
	$loading.show()
	getData1((f)=>{
		if (f) {
			getData2(()=>{
				$loading.hide()
			})
		} else {
			$loading.hide()
		}
	})
}

const getData1 = function(callback){
	$api.get('AGVAlarm',{},{block:'newscreen'}).then((d)=>{
		agv1Info.value.agvName = (d.agV01 || {}).agvName
		agv1Info.value.agvStatus = (d.agV01 || {}).agvStatus
		agv1Info.value.alarmTime = (d.agV01 || {}).alarmTime
		agv1Info.value.alarmCode = (d.agV01 || {}).alarmCode
		agv2Info.value.agvName = (d.agV02 || {}).agvName
		agv2Info.value.agvStatus = (d.agV02 || {}).agvStatus
		agv2Info.value.alarmTime = (d.agV02 || {}).alarmTime
		agv2Info.value.alarmCode = (d.agV02 || {}).alarmCode
		callback && callback(true)
	}).catch(()=>{
		callback && callback(false)
	})
}

const getData2 = function(callback){
	chartData.value.loaded = false
	$api.get('AGVLocation',{},{block:'newscreen'}).then((d)=>{
		chartData.value.total = d.totalStorageLocation || 0
		chartData.value.emptyTray = d.emptyTray || 0
		chartData.value.emptyLocation = d.emptyLocation || 0
		chartData.value.goods = d.goods || 0
		chartData.value.loaded = true
		nextTick(()=>{
			instance.refs.storechart.drawChart()
		})
		callback && callback(true)
	}).catch(()=>{
		callback && callback(false)
	})
}


const createInterval = function(){
	interval1 = window.setInterval(getData1,$config.base.screen.newscreen2.intervalTime1)
	interval2 = window.setInterval(getData2,$config.base.screen.newscreen2.intervalTime2)
}

const destoryIntervel1 = function(){
	try{
		window.clearInterval(interval1)
		interval1 = null
	}catch(e){
		//TODO handle the exception
	}
}

const destoryIntervel2 = function(){
	try{
		window.clearInterval(interval2)
		interval2 = null
	}catch(e){
		//TODO handle the exception
	}
}

const destoryIntervel = function(){
	destoryIntervel1()
	destoryIntervel2()
}

onMounted(()=>{
	getData()
	createInterval()
})

onBeforeUnmount(()=>{
	destoryIntervel()
})
</script>

<style scoped lang="scss">
.page-newscreen2-container {
	$dividerSize:.6em;
	box-sizing: border-box;
	padding-top: .4em;
	padding-bottom: $dividerSize;
	.divider{
		width: $dividerSize;
		flex-shrink: 0;
	}
	.ver-divider{
		height: $dividerSize;
		flex-shrink: 0;
	}
	.ver-flex-block{
		height: 1px;
		flex-grow: 1;
	}
	.flex-block{
		width: 1px;
		flex-grow: 1;
	}
	.special-blcok{
		flex-shrink: 0;
	}
	.special-blcok-size-a{
		width: 3.5em;
	}
	.status-text-view {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1em;
		&.danger {
			color: #D9001B;
		}
		&.normal {
			color: #95F204;
		}
	}
	.abnormal-info{
		height: 100%;
		.has-info,.no-info {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
		.has-info{
			font-size: .4em;
			text-align: center;
			line-height: 1.2em;
			.time-info{
				color: white;
			}
			.code-info{
				color: #D9001B;
			}
			.number{
				font-family: electronicFont;
			}
		}
		.no-info{
			align-items: center;
			color: white;
		}
	}
}
</style>